<template>
  <div class="OrderList">
    <el-table
      style="width: 100%"
      :data="orderList"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      border
      empty-text="暂无订单"
    >
      <el-table-column label="订单详情" width="495px">
        <template #default="{ row }">
          <el-table
            :data="row"
            style="width: 100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            empty-text="暂无订单"
            border
          >
            <el-table-column label="图片">
              <template v-slot:header>
                <span>订单号：{{ row[0].oid }}</span>
              </template>
              <template #default="{ row }">
                <el-image
                  :src="row.goods_thumbnail_img"
                  style="height: 120px; width: 120px"
                  @click="gotoDetail(row.gid)"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="goods_name" label="名称">
              <template v-slot:header>
                <span>{{ row[0].time }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="evaluation" label="评价">
              <template v-slot="scope">
                <p>
                  <a href="javascript:;" @click="openEvaluation(scope.row)"
                    >评价该商品</a
                  >
                </p>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="收取人" width="123.75px">
        <template #default="{ row }">
          <span>{{ row[0].receiver }} </span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" width="123.75px">
        <template #default="{ row }">
          <span>{{ row[0].phone }} </span>
        </template>
      </el-table-column>

      <el-table-column label="金额" width="123.75px">
        <template #default="{ row }">
          <span>￥{{ row[0].sum }} </span>
        </template></el-table-column
      >

      <el-table-column label="全部状态" width="123.75px">
        <template #default="{ row }">
          <span>{{ row[0].status }} </span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="123.75px">
        <template #default="{ row }">
          <div v-if="row[0].status == '已完成'">
            <p><a href="/">查看发票</a></p>
            <p><a href="/">前去评价</a></p>
          </div>
          <div v-else>
            <p><a  @click="payOrder(row[0])">继续付款</a></p>
            <p><a  @click="deleteOrder(row[0].oid)">取消订单</a></p>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--遮罩层-->
    <div id="fade" class="black_overlay" v-show="isEvaluation"></div>

    <!-- 评价窗口 -->
    <el-card class="evaluation_container" v-show="isEvaluation">
      <!--评价弹窗头部-->
      <div style="text-align: right">
        <!--关闭按钮-->
        <span id="close_evaluation_container" @click="closeEvaluation()">
          <svg
            t="1624902187987"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2392"
            width="16"
            height="16"
          >
            <path
              d="M578.05 512l330.27-330.26a46.71 46.71 0 1 0-66.05-66.05L512 446 181.74 115.68a46.71 46.71 0 0 0-66.05 66.05L445.95 512 115.68 842.27a46.71 46.71 0 0 0 66.05 66.05L512 578.06l330.26 330.27a46.71 46.71 0 0 0 66.05-66.05z"
              p-id="2393"
            ></path>
          </svg>
        </span>
      </div>

      <!-- 评价商品信息 -->
      <el-card shadow="never">
        <el-row style="height: 80px; overflow: hidden" align="middle">
          <el-image
            :src="evaluationGoods.img"
            style="float: left; height: 80px; width: 80px"
          ></el-image>
          <span
            style="float: left; height: 50px; width: 500px; margin-left: 10px"
            ><h5>{{ evaluationGoods.name }}</h5></span
          >
        </el-row>
      </el-card>
      <!-- 评价窗口 -->
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="300"
        show-word-limit
        resize="none"
        autofocus="true"
        rows="8"
        style="margin-top: 10px"
      >
      </el-input>
      <div style="width: 100%; text-align: right">
        <el-button
          type="primary"
          style="margin-top: 10px"
          @click="updateComment()"
          >提交评价</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUserOrder, getProductUserComment } from "@/apis/getData.js";
import { deleteincompleteOrder } from "@/apis/deleteData.js";
import { updateProductComment,updateUserOrder } from "@/apis/updateData.js";
import { insertProductComment } from "@/apis/insertData.js";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "ShoppingCart",

  setup() {
    const isEvaluation = ref(false);
    const orderList = ref([]);
    const islogin = ref(false);
    const store = useStore(); // 使用useStore方法
    const router = useRouter();
    const evaluationGoods = ref({});
    const evaluationGoodsComment = ref({});
    const textarea = ref("");
    const isExistComment = ref(false);

    onMounted(() => {
      if (store.getters.getUser == null) {
        router.push("/login");
      } else {
        let userdata=store.getters.getUser.uid;
        let params = new FormData();
        //获取用户id,这里为了演示就用id为1的账号
        params.append("uid", userdata);

        getUserOrder(params).then((res) => {
          orderList.value = res.data.data;
        });
      }
    });

    function checkLoging() {
      if (store.getters.getUser == null) {
        islogin.value = false;
      } else {
        islogin.value = true;
      }
    }
    //打开评价弹框获取对应商品信息
    function openEvaluation(row) {
      //获取点击对应的商品信息
      evaluationGoods.value = {
        img: row.goods_thumbnail_img,
        name: row.goods_name,
        gid: row.gid,
        uid: row.uid,
      };
      console.log(row);
      //显示评论窗口
      isEvaluation.value = !isEvaluation.value;
      //获取用户对应该商品的评论
      getProductUserComment({ uid: store.getters.getUser.uid, gid: row.gid }).then(
        (res) => {
          var comment = res.data.data;
          if (comment == null) {
            isExistComment.value = false;
            textarea.value = "";
          } else {
            isExistComment.value = true;
            textarea.value = comment.commentDetails;
            evaluationGoods.value.cid = comment.cid;
          }
        }
      );
    }
    //关闭弹框
    function closeEvaluation() {
      isEvaluation.value = !isEvaluation.value;
    }
    return {
      orderList,
      islogin,
      checkLoging,
      isEvaluation,
      openEvaluation,
      closeEvaluation,
      evaluationGoods,
      evaluationGoodsComment,
      textarea,
      isExistComment,
    };
  },
  methods: {
    deleteOrder(oiddata) {
      let params = new FormData();
      //获取用户id,这里为了演示就用id为1的账号
      let uid=this.$store.getters.getUser.uid;
      params.append("uid", uid);
      params.append("oid", oiddata);
      let title;

      deleteincompleteOrder(params).then((res) => {
        title = res.data.message;
        this.$message.success(title);
        this.$router.push('/OrderList');
      });

    },
    payOrder(row){
      let params = new FormData();
      //获取用户id,这里为了演示就用id为1的账号
      let uid=this.$store.getters.getUser.uid;
      params.append("uid", uid);
      params.append("oid", row.oid);

      let title;
      updateUserOrder(params).then((res) => {
        title = res.data.message;
        this.$message.success(title);
        row.status="已完成";
      });

    },
    updateComment() {
      let params = {
        uid: this.evaluationGoods.uid,
        gid: this.evaluationGoods.gid,
        comment_details: this.textarea,
      };
      if (this.isExistComment) {
        params.cid = this.evaluationGoods.cid;
        //update
        updateProductComment(params).then(
          alert("评论成功！"),
          this.closeEvaluation()
        );
      } else {
        //insert
        insertProductComment(params).then(
          alert("评论成功！"),
          this.closeEvaluation()
        );
        this.isExistComment = !this.isExistComment;
      }
    },
    gotoDetail(gid){
      console.log("test")
     this.$router.push({
        path:'detail',
        query:{
          gid:gid,
        }
      })
    }
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
}
.OrderList {
  margin: 0 auto;
  width: 1112px;
}
.orderDetails {
  display: flex;
  justify-content: space-between;
  margin: 10px 0px;
  border: 1px;
}

.black_overlay {
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 10000;
  opacity: 0.6;
}
.evaluation_container {
  position: fixed;
  top: 15%;
  left: 29%;
  width: 700px;
  height: 450px;
  z-index: 20000;
}
.evaluation_container >>> .el-textarea__inner {
  font-size: 16px !important;
}
</style>
